<%@ Page Title="Core Features" Language="C#" MasterPageFile="~/Demo.master" Inherits="DemoPage" %>

<%@ Register Src="~/CodeFormatter.ascx" TagName="Code" TagPrefix="demo" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.IO" %>

<script runat="server">
    protected void OnColorChanged(object sender, EventArgs e)
    {
        ColorLabel.ForeColor = Color.FromName(DropDownList1.SelectedValue);
    }

    protected void GetServerTime(object sender, EventArgs e)
    {
        lbTimer.Text = "Server Time:" + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
    }

    protected void PropertiesChanged(object sender, EventArgs e)
    {
        Tabs1.Sortable = cbSortable.Checked;
        Tabs1.Collapsible = cbCollapsible.Checked;
        Tabs1.Deselectable = cbDeselectable.Checked;
    }
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="DemoHolder" runat="Server">
    <div class="dna-state-help ui-corner-all" style="margin-bottom: 10px;">
        Click Tabs to swap between content that is broken into logical section Views.
    </div>
    <div>
        <h6>
            <b>Client Events:</b></h6>
        <div class="dna-demo-fields">
            <ul>
                <li><span>event:</span><label id="el"></label></li>
                <li><span>selected tab:</span><label id="st"></label></li>
            </ul>
        </div>
    </div>
    <br />
    <DotNetAge:Tabs ID="Tabs1" runat="server" OnClientTabDisabled="displayClientInfo(event, ui);"
        OnClientTabEnabled="displayClientInfo(event, ui);" OnClientTabSelected="displayClientInfo(event, ui);"
        OnClientTabShow="displayClientInfo(event, ui);">
        <Views>
            <DotNetAge:View ID="View3" runat="server" Text="Description">
                <p>
                    Tabs is a ASP.NET WebControl that encapsulated the jQuery UI tabs plugin.Tabs are
                    generally used to break content into multiple sections that can be swapped to save
                    space, much like an Accordion.
                </p>
                <p>
                    By default a Tabs will swap between tabbed sections onClick, but the events can
                    be changed to onHover through an property. Tab content can be loaded via Ajax by
                    setting an NavigateUrl on a View Control.
                </p>
            </DotNetAge:View>
            <DotNetAge:View ID="View5" runat="server" Text="Tab settings">
                <div>
                    <h6>
                        <b>Controls' Properies:</b></h6>
                    <div class="dna-demo-fields">
                        <ul>
                            <li><span>Sortable</span><asp:CheckBox ID="cbSortable" runat="server" OnCheckedChanged="PropertiesChanged"
                                AutoPostBack="true" Text="" /></li>
                            <li><span>Deselectable</span><asp:CheckBox ID="cbDeselectable" runat="server" OnCheckedChanged="PropertiesChanged"
                                AutoPostBack="true" /></li>
                            <li><span>Collapsible</span><asp:CheckBox ID="cbCollapsible" runat="server" OnCheckedChanged="PropertiesChanged"
                                AutoPostBack="true" /></li>
                        </ul>
                    </div>
                </div>
            </DotNetAge:View>
            <DotNetAge:View ID="View2" runat="server" Text="Using UpdatePanel">
                <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                    <ProgressTemplate>
                        <div class="dna-state-loading-s">
                            <div>
                            </div>
                        </div>
                    </ProgressTemplate>
                </asp:UpdateProgress>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <div>
                            Colors:<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" Width="150"
                                OnSelectedIndexChanged="OnColorChanged">
                                <asp:ListItem Text="Black" Style="background-color: Black; color: White;" Value="Black"></asp:ListItem>
                                <asp:ListItem Text="Red" Style="background-color: Red; color: White;" Value="Red"></asp:ListItem>
                                <asp:ListItem Text="Blue" Style="background-color: Blue; color: White;" Value="Blue"></asp:ListItem>
                            </asp:DropDownList>
                        </div>
                        <div>
                            <asp:Label ID="ColorLabel" runat="server" Text="Choice the color above the DropDownList to change this label's color"></asp:Label></div>
                        <br />
                        <br />
                        <div>
                            <asp:Label ID="lbTimer" runat="server" Text="Click the 'Go' button to load the server time."></asp:Label></div>
                        <br />
                        <br />
                        <div>
                            <asp:Button ID="Button1" runat="server" Text="Go" OnClick="GetServerTime"></asp:Button>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </DotNetAge:View>
        </Views>
    </DotNetAge:Tabs>

    <script type="text/javascript">
        function displayClientInfo(event, ui) {
            $('#el').html(event.type);
            $('#st').html(ui.index);
        }
    </script>

    <br />
    <demo:Code runat="server" ID="codeView" SourceFile="~/Tabs/Codes/CoreSample.aspx" />
</asp:Content>
